<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Custom Events &raquo; Attaching and Detaching</title>
  <style type="text/css">
  body {
    padding: 0;
    margin: 0;
    background-color: #4f4e45;
    font-family: Tahoma, Arial, sans-serif;
  }
  
  #header {
    height: 30px;
    background-color: #111;
    color: #EEE;
    font-size: 10pt;
    padding-top: 4px;
    border-bottom: 1px solid #333;
  }
  
  #main {
    margin: 20px auto;  
    height: 181px;
    width: 610px;
  }
  
  #main h2 {
    font-weight: normal;
    margin: 0;
    color: #ff9600;
    font-size: 14pt;
    font-family: Tahoma, Arial, sans-serif;
    padding-bottom: 1em;
  }
  
  a {
    color: #fff;
  }
  </style>
</head>
<body>

<div id="main">
    <h2>Testing custom events and interception</h2>

    <p>
        The initial example was using Prototype, but I asked for others to port, and immediately got a jQuery version from Malte, so now I will host links to the different ports:
        <ul>
            <li><a href="prototype.html">Prototype (Dion)</a></li>
            <li><a href="jquery.html">jQuery (Malte)</a></li>
            <li><a href="domassistant.html">DOMAssistant (chenghong)</a></li>
            <li><a href="appcelerator.html">Appcelerator (Kevin)</a> and <a href="appcelerator2.html">Appcelerator (Ivo)</a></li>
            <li><a href="mootools.html">Mootools (Matthew)</a></li>
        </ul>
    </p>
    <p>
        I then went on to play with bindings keys to events, and then observing them. <a href="keys.html">Here is an example using Prototype</a>.
    </p>
</div>
</body>
</html>